<script lang="ts" setup>
  import { showHistoryKey, voiceKey } from '@/components/DeepseekChat/types'
  import DeepseekChat from '@/components/DeepseekChat/index.vue'
  import { usePostMessage } from '@/hooks/usePostMessage'
  import { provide, ref } from 'vue'
  import { useRoute } from 'vue-router'
  import { useAuthStore } from '@/stores'
  import axios from 'axios'
  const getAgent = async () => {
    const res = await axios.get('/agent.json')
    agentList.value = res.data
    if (agentList.value.length > 0) {
      deepseekChatRef.value?.handleAgentClick(agentList.value[0])
    }
  }
  await getAgent()
  const agentList = ref([])
  const chatApi = import.meta.env.VITE_DIFY_URL
  const apiKey = import.meta.env.VITE_DIFY_API_KEY
  // const difyUser = import.meta.env.VITE_USER_NAME
  const route = useRoute()
  const difyUser = route.query.userId as string

  const userName = route.query.nickName as string
  const greeting =
    '我是您的智能运维助手，擅长智能导航、知识问答、设备健康诊断等，快告诉我你的问题吧！'
  // 是否开启语音
  const isVoice = ref(true)
  const videoText = ref('')
  const store = useAuthStore()
  const deepseekChatRef = ref<InstanceType<typeof DeepseekChat> | null>(null)
  const { postMessage, isIframe } = usePostMessage({
    voiceFunc: (flag: boolean) => {
      isVoice.value = flag
    },
    textFunc: (text: string) => {
      videoText.value = text
    },
    tokenFunc: (_token: string) => {
      store.setToken(_token)
    },
    deviceIdFunc: (deviceId: string, label: string) => {
      if (deepseekChatRef.value) {
        deepseekChatRef.value.createDeviceHealthDialog(deviceId, label)
      }
    },
  })

  const toggleVoice = () => {
    // 这里语音切换是因为智能体以iframe形式嵌入到页面中，一般情况下都会出现跨域问题，所以需要通过postMessage来访问父页面,通过父页面与智能体进行交互实现语音功能
    if (isIframe) {
      postMessage('RECORDING', {
        flag: isVoice.value ? 'start' : 'stop',
      })
    }
  }

  provide(voiceKey, {
    isVoice,
    toggleVoice,
    videoText,
  })

  // 是否显示历史记录
  const showHistory = ref(false)
  const fullScreen = ref(false)
  const toggleHistory = () => {
    showHistory.value = !showHistory.value
    postMessage('HISTORY', {
      flag: showHistory.value ? 'show' : 'hide',
    })
  }

  const toggleFullScreen = () => {
    fullScreen.value = !fullScreen.value
    // 全屏切换
    postMessage('FULL_SCREEN', {
      flag: fullScreen.value ? 'show' : 'hide',
    })
  }

  const closeAgent = () => {
    postMessage('CLOSE', {
      flag: 'close',
    })
  }

  const handleAgentNav = (params: { path: string; id: string; camera: string; dz: string }) => {
    if (params.path) {
      // 智能体导航
      postMessage('AGENT_NAV', {
        path: params.path,
        id: params.id ? params.id : '',
        camera: params.camera ? params.camera : '',
        dz: params.dz ? params.dz : '',
      })
    }
  }

  const getToken = () => {
    postMessage('GET_TOKEN', {
      flag: 'get',
    })
  }

  provide(showHistoryKey, {
    showHistory,
    toggleHistory,
    fullScreen,
    toggleFullScreen,
    closeAgent,
    handleAgentNav,
    getToken,
  })
</script>

<template>
  <DeepseekChat
    ref="deepseekChatRef"
    :user="difyUser"
    :apiKey="apiKey"
    :chatApi="chatApi"
    :userName="userName"
    :greeting="greeting"
    :agentList="agentList"
  />
</template>
